<template>
    <van-tabbar route v-model="actived">
        <van-tabbar-item icon="gem-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/classify">分类</van-tabbar-item>
        <van-tabbar-item icon="cart-o" to="/shopp">购物车</van-tabbar-item>
        <van-tabbar-item icon="manager-o" to="/mine">我</van-tabbar-item>
    </van-tabbar>
    <div class="header">商品分类</div>
    <div class="container">
        <div class="l_box wrapper" ref="wrapper">
            <div class="oBox content">
                <van-sidebar v-model="active">
                    <van-sidebar-item @click="lTab(index)" style="padding:0.6rem 0.5rem;" v-for="item, index in list"
                        :key="index" :title="item.name"></van-sidebar-item>
                </van-sidebar>
            </div>
        </div>
        <div class="r_box">
            <div class="content2">
                <ul ref="oUl" v-for="item, index in list" :key="index">
                    <li v-for="obj, index in item.list" :key="index">
                        <p style="padding:0 10px 10px;" class="i_title">{{ obj.title }}</p>
                        <div class="item_box">
                            <div @click="jumpSearch" class="item" v-for="grandson, index in obj.productList" :key="index">
                                <img :src="grandson.imgUrl" alt="">
                                <p>{{ grandson.title }}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="redRoue" v-show="shopStore.isHidden">{{ shopStore.shopList.length }}</div>
</template>

<script type="module" setup>
import { debounce, trottle } from "../utils/tool"
import { useRouter } from 'vue-router'
import { getClassify } from "../api/home"
import BScroll from "better-scroll"
import { ref, nextTick, reactive, onMounted, watch } from 'vue'
import { useShopStore } from '../store/shop'
const shopStore = useShopStore()
const router = useRouter()
let actived = ref(0)
let active = ref(0)
let bScroll1 = ref(null);
let bScroll2 = ref(null);
let listHeight = ref([])
let list = ref([])
let scrollY = ref(0)
let oUl = ref(null)
function lTab(i) {
    bScroll2.value.scrollToElement(".content2", 1000, 0, document.querySelectorAll(".content2 ul")[i].offsetTop)
}
function jumpSearch() {
    router.push("/pageSearch")
}
function height() {
    setTimeout(() => {
        let height = 0;
        listHeight.value.push(height);
        for (let i = 0; i < oUl.value.length; i++) {
            let item = oUl.value[i];
            height += item.clientHeight;
            listHeight.value.push(height)
        }
    }, 500)
}
onMounted(async () => {
    await nextTick(() => {
        height();
        bScroll1.value = new BScroll(document.querySelector(".l_box"), {
            probeType: 2,
            click: true,
        })
        bScroll2.value = new BScroll(document.querySelector(".r_box"), {
            probeType: 2,
            click: true,
        })
        trottle(bScroll2.value.on("scroll", position => {
            scrollY.value = Math.abs(Math.round(position.y));
            for (let i = 0; i < oUl.value.length; i++) {
                let height1 = listHeight.value[i];
                let height2 = listHeight.value[i + 1];
                console.log(i);
                if (!height2 || (scrollY.value >= height1 && scrollY.value < height2)) {
                    active.value = i;
                    return;
                }
            }
        }), 500)
    })
})
watch(list, () => {
    nextTick(() => {
        bScroll1 && bScroll1.value.refresh()
        bScroll2 && bScroll2.value.refresh()
    }, { deep: true })
})
getClassify().then(res => {
    list.value = res.data.categoryData
})
</script>

<style lang="scss" scoped>
.redRoue {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #d8182d;
    position: fixed;
    bottom: 67px;
    right: 32%;
    z-index: 100;
    color: #fff;
    font-size: 24px;
    text-align: center;
}

body {
    font-size: 12px;
}

.header {
    width: 750px;
    font-size: 36px;
    text-align: center;
    padding: 20px 0 10px;
    font-weight: 600;
}

.container {
    width: 750px;
    height: 1435px;
    display: flex;

    .r_box {
        width: 590px;
        height: 1435px;
        overflow: hidden;
        position: relative;

        .content2 {
            width: 590px;

            li {
                padding: 20px 0 0;
                box-sizing: border-box;

                .i_title {
                    font-size: .373333rem;
                    color: #d8182d;
                    font-weight: 600;
                    padding-bottom: 0.266667rem;
                }

                .item_box {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;

                    .item {
                        width: 195px;
                        height: 300px;
                        text-align: center;

                        img {
                            width: 170px;
                            height: 230px;
                        }

                        p {
                            font-size: 30px !important;
                        }
                    }
                }
            }
        }

        .l_box {
            width: 160px;
            height: 1435px;
            overflow: hidden;
            position: relative;

            .oBox {
                width: 160px;

            }
        }
    }
}
</style>